<template>
  <div>
    <el-form
      ref="searchForm"
      :inline="true"
      :model="searchMap"
      style="margin-top: 20px"
    >
      <el-form-item prop="name">
        <el-input
          v-model="searchMap.name"
          placeholder="商品名称"
          style="width: 200px"
        ></el-input>
      </el-form-item>

      <el-form-item prop="code">
        <el-input
          v-model="searchMap.code"
          placeholder="商品编号"
          style="width: 200px"
        ></el-input>
      </el-form-item>

      <el-form-item prop="supplierName">
        <el-input
          readonly
          @click.native="showsupplierDialog"
          v-model="searchMap.supplierName"
          placeholder="供应商"
          style="width: 200px"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData"
          >查询</el-button
        >
        <el-button type="success" @click="resetForm('searchForm')"
          >重置</el-button
        >
        <el-button type="warning" icon="el-icon-save" @click="handleAdd"
          >新增</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      :data="list"
      height="380"
      border
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="code" label="商品编码"></el-table-column>
      <el-table-column prop="spec" label="商品规格"></el-table-column>
      <el-table-column prop="retailPrice" label="零售价"></el-table-column>
      <el-table-column prop="purchasePrice" label="进货价"></el-table-column>
      <el-table-column prop="storageNum" label="库存数量"></el-table-column>
      <el-table-column prop="supplierName" label="供应商"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="handleDele(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total,sizes,prev,pager,next,jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      title="选择供应商"
      :visible.sync="dialogSupplierVisible"
      width="500px"
    >
      <supplier
        :isDialog="isDialog"
        :optinonSupplie="optinonSupplie"
      ></supplier>
    </el-dialog>

    <!-- 添加或者修改商品 -->
    <el-dialog
      :title="goods.id == null ? '添加商品' : '修改商品'"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        status-icon
        :model="goods"
        label-width="80px"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="goods.name" />
        </el-form-item>
        <el-form-item label="商品编码" prop="code">
          <el-input v-model="goods.code" />
        </el-form-item>
        <el-form-item label="商品规格" prop="spec">
          <el-input v-model="goods.spec" />
        </el-form-item>
        <el-form-item label="零售价" prop="retailPrice">
          <el-input v-model="goods.retailPrice" />
        </el-form-item>
        <el-form-item label="进货价" prop="purchasePrice">
          <el-input v-model="goods.purchasePrice" />
        </el-form-item>
        <el-form-item label="库存数量" prop="storageNum">
          <el-input v-model="goods.storageNum" />
        </el-form-item>
        <el-form-item label="供应商" prop="supplierId">
          <el-input
            readonly
            @click.native="editonSupplier"
            v-model="goods.supplierName"
            placeholder="选择供应商"
            style="width: 200px"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addGoods('ruleForm')">{{
          goods.id == null ? "添加" : "修改"
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import goodsApi from "@/api/goods";
import Supplier from "@/views/supplier";

export default {
  data() {
    return {
      list: [],
      total: 0,
      currentPage: 1, //当前页,默认第1页
      pageSize: 10, //每页显示条数，10条
      //条件查询绑定条件
      searchMap: {
        name: "",
        code: "",
        supplierName:'',
      },
      dialogFormVisible:false,
      dialogSupplierVisible: false,
      isDialog: true,
      goods: {
        id: null,
        name: "",
        code: "",
        spec: "",
        retailPrice: 0.0,
        purchasePrice: 0.0,
        storageNum: 0,
        supplierName: "",
        supplierId: null,
      },
      isEdit: false,
      rules: {
        name: [
          { required: true, message: "商品名称不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "商品编码不能为空", trigger: "blur" },
        ],
        retailPrice: [
          { required: true, message: "零售价不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.fetchData();
  },

  components: { Supplier },

  methods: {
    fetchData() {
      goodsApi
        .search(this.currentPage, this.pageSize, this.searchMap)
        .then((response) => {
          const reqs = response.data;
          this.total = reqs.total;
          this.list = reqs.records;
        });
    },
    handleEdit(id) {
      this.handleAdd();
      goodsApi.getById(id).then((response) => {
        const req = response.date;
        if (response.code == 2000) {
          this.goods = response.data.data;
        }
      });
    },
    handleDele(id) {
      this.$confirm("确认删除这条记录吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        goodsApi.deleteById(id).then((response) => {
          if (response.code == 2000) {
            this.fetchData();
          }
        });
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.searchMap={}
    },
    xuhao(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },
    addGoods(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          goodsApi.add(this.goods).then((response) => {
            const resp = response.data;
            if (response.code == 2000) {
              this.currentPage = 1;
              this.fetchData();
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: resp.message,
                type: "warning",
              });
            }
          });
        } else {
          //验证不通过
          return false;
        }
      });
    },
    handleAdd() {
      this.isEdit = true;
      this.dialogFormVisible = true;
      this.chongzhi();
      this.$nextTick(() => {
        //this.$nextTick()它是一个异步事件，当渲染结束之后，它的回调函数才会被执行
        //弹出窗口打开之后，需要加载Dom,就需要花费一点时间，我们就应该等待它加载完dom之后，再进行调用resetFields方法，重置表单和清除样式
        this.$refs["ruleForm"].resetFields();
      });
    },
    chongzhi() {
      this.goods = {
        id: null,
        name: "",
        code: "",
        spec: "",
        retailPrice: 0.0,
        purchasePrice: 0.0,
        storageNum: 0,
        supplierName: "",
        supplierId: null,
      };
    },

    showsupplierDialog() {
      this.isEdit = false;
      this.dialogSupplierVisible = true;
    },
    optinonSupplie(currentRow) {
      if (this.isEdit) {
        this.goods.supplierName = currentRow.name;
        this.goods.supplierId = currentRow.id;
         this.isEdit = true;
      } else {
        this.searchMap.supplierName = currentRow.name;
        this.searchMap.supplierId = currentRow.id;
        this.isEdit = false;
      }
      //this.isEdit = false;
      this.dialogSupplierVisible = false;
    },
    editonSupplier() {
      this.isEdit = true;
      this.dialogSupplierVisible = true;
    },
  },
};
</script>

<style scoped>
</style>